import * as React from 'react';
import classNames from 'classnames';

import { ComponentType } from '../types';

import './index.scss';

export class ListItem extends React.Component {
  render() {
    return <li className="x-list-item">{this.props.children}</li>;
  }
}

export class ListTitle extends React.Component {
  render() {
    return <li className="x-list-title">{this.props.children}</li>;
  }
}

type ListProps = {
  style?: React.CSSProperties | undefined;
  type?: ComponentType;
};

export class List extends React.Component<ListProps> {
  render() {
    const { style, type } = this.props;
    return (
      <ul style={style} className={classNames('x-list', `x-list-${type}`)}>
        {this.props.children}
      </ul>
    );
  }
}
